<template>
  <div class="grade">
    <van-nav-bar title="招企总评分650分" left-arrow @click-left="$router.push('/myCompany')">
      <template #right>
        <van-icon name="ellipsis" size="18" @click="showOverlay = true" />
      </template>
    </van-nav-bar>

    <van-overlay :show="showOverlay" @click="showOverlay = false" class-name="over_layer">
      <van-cell-group class="layer">
        <div class="show" v-for="(item, index) in list" :key="index" >
          <van-cell :value="item.title" @click="list_color(item.id)"/>
        </div>
      </van-cell-group>
    </van-overlay>
    <div class="information">
      <div class="log_left">
        <img src="../../assets/img/enterprise.png" alt="#">
      </div>
      <div class="log_right">
        <div class="logName">招企</div>
        <div class="logGrade">
          <span>评价/评价时间</span>
          <span>2020年12月31号10:22</span>
        </div>
      </div>
    </div>
    <div class="gradeIntroduction" v-for="(item,index) in gradeIntroduction" :key="index">
      <div class="gradeIntroduction_A">
        <span :style="item.fig?'background:red':false">{{item.title}}</span>
      </div>
      <div class="gradeIntroduction_B">内容区</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentTab: 0,
      showOverlay: false,
      list: [{title:'搜索'},{title:'默认'},{title:'用企评分',id:0},{title:'招企评分',id:1},{title:'平台评分',id:2}],
      gradeIntroduction:[
        {
          id:0,
          title:"用企评分/+5评价说明",
          fig:false
        },{
          id:1,
          title:"招企评分/+5评价说明",
          fig:false
        },{
          id:2,
          title:"平台评分/+5评价说明",
          fig:false
        }
      ]
    }
  },
  methods: {
    list_color(e){
      this.gradeIntroduction.forEach((item,index)=>{
        item.fig = false
      })
      this.gradeIntroduction[e].fig = true
    }
  }
}
</script>
<style lang="scss" scoped>
.grade {
  width: 100%;
  .over_layer {
    margin-top: 1.13rem;
    height: 100%;
    .layer {
      width: 40%;
      font-size: 0.34rem;
      position: absolute;
      right: 0;
      z-index: 2;
    }
  }
  .information {
    width: 100%;
    display: flex;
    background: white;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 1.4vh 0;
    .log_left {
      width: 1.7rem;
      height: 1.7rem;
      background: #999;
      img{
        width: 100%;
      }
    }
    .log_right{
      flex: 1;
      font-size:0.36rem;
      text-align: center;
      .logName{
        margin-bottom: 0.726rem;
      }
      .logGrade{
        span{
          margin: 0.37rem;
        }
      }
    }
  }
  .gradeIntroduction{
    width: 100%;
    margin: 0 auto;
    font-size: 14px;
    .gradeIntroduction_A{
      text-align: center;
      padding-bottom: 0.24rem;
      span{
        display: block;
        color: white;
        padding: 0.13rem;
        background: skyblue;
      }
    }
    .gradeIntroduction_B{
      background: #999;
      height: 2.8rem;
      margin-bottom: 0.24rem;
    }
  }
}
</style>